@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentListVm3

<wt:quote>
  <p>TreeContainer主要用于左侧树形结构，右侧导航到其他元素的场景</p>
</wt:quote>

<wt:fieldset field-set-style="Simple" title="TreeContainer">
 </wt:fieldset>
 <p>TreeContainer的常用属性有：</p>
  <table lay-filter="parse-table-demo">
    <thead>
      <tr>
        <th lay-data="{field:'username', width:200}">属性</th>
        <th lay-data="{field:'required', width:60}">必填</th>
        <th lay-data="{field:'joinTime', width:600}">描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Id</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>控件Id，默认根据绑定字段名称生成</td>
      </tr>
      <tr>
        <td>Field</td>
        <td><i class="layui-icon layui-icon-ok"></i></td>
        <td>绑定字段</td>
      </tr>
      <tr>
        <td>ShowLine</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>是否显示连线，默认为true</td>
      </tr>
      <tr>
        <td>IdField</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>当嵌套Grid时使用，树会把点击节点的ID传递给绑定的IdField，比如Searcher.xxxId</td>
      </tr>
      <tr>
        <td>LevelField</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>当嵌套Grid时使用，树会把点击节点的层级（从0开始的整形）传递给绑定的LevelField，比如Searcher.level</td>
      </tr>
      <tr>
        <td>AutoLoadUrl</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>右侧默认显示的页面</td>
      </tr>
      <tr>
        <td>Name</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>控件Name，默认根据绑定字段名称生成</td>
      </tr>
      <tr>
        <td>Items</td>
        <td><i class="layui-icon layui-icon-ok"></i></td>
        <td>列表数据源，类型为List&lt;TreeSelectListItem&gt;</td>
      </tr>
      <tr>
        <td>ClickFunc</td>
        <td><i class="layui-icon layui-icon-close"></i></td>
        <td>点击节点触发的js方法名，框架会给js方法传递一个包含节点信息的参数。比如你自己写的js方法是 func OnClick(data){...}, 那么在控件上设定 click-func="OnClick"即可</td>
      </tr>
    </tbody>
  </table>

    <wt:quote>
    <p>TreeContainer控件必须绑定Items字段，通过 Items 属性设置数据源，Items需要绑定一个List&lt;TreeSelectListItem&gt;</p>
    <p>TreeSelectListItem 是框架提供的辅助类，有 Id，Text，Url，Children等属性</p>
    <p>继承了ITreeData接口的模型，可以方便的调用框架提供的函数生成TreeContainer需要的数据格式,</p>
    <p>比如 DC.Set<Department>().GetTreeSelectListItems(LoginUserInfo.DataPrivileges,null,x=>x.DepName) 直接读库并生成一个List&lt;TreeSelectListItem&gt;</p>
  </wt:quote>


<wt:quote>
  <p>TreeContainer主要有三种用法</p>
</wt:quote>

<wt:fieldset field-set-style="Simple" title="简单导航">
  <p>点击树形结构的元素时，根据绑定的List&lt;TreeSelectListItem&gt;中的Url属性，再右侧显示页面</p>
  <p>如下</p>
  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="效果" />
      <wt:tabheader title="代码" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="UrlTree" height="300" />
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//只需要这一句，框架会从items绑定的这个UrlTree字段中读取url
&lt;wt:treecontainer items="UrlTree" /&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>

</wt:fieldset>

<wt:fieldset field-set-style="Simple" title="动态控制">
  <p>这种模式下右侧并不会出现页面，而是直接把其他控件写在wt:treecontainer内部，然后用js动态控制</p>
  <p>如下</p>
  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="效果" />
      <wt:tabheader title="代码" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="AllDeps" click-func="SetText" height="300">
          <wt:textbox field="Test" />
        </wt:treecontainer>
        <script>
          function SetText(data) {
            $('#StudentListVm3_Test').val(data.data.title);
          }
        </script>
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//通过设定click-func来动态操作右侧控件
&lt;wt:treecontainer items="AllDeps" click-func="SetText"&gt;
  //写在treecontainer里面的控件会出现在右侧
  //写复杂的控件或者html都可以
  &lt;wt:textbox field="Test" /&gt;
&lt;/wt:treecontainer&gt;
//click-func指定的js函数，当点击树的时候调用
&lt;script&gt;
  function SetText(data) {
    $('#VMName_Test').val(data.data.title);
  }
&lt;/script&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>
</wt:fieldset>

<wt:fieldset field-set-style="Simple" title="绑定列表">
  <p>这是上一种模式的特殊情况，如果框架检测到你在wt:treecontainer中使用了wt:grid，</p>
  <p>那么当你点左侧树的时候，会把选中节点id作为搜索条件传递给内部grid</p>

  <wt:tab>
    <wt:tabheaders>
      <wt:tabheader title="效果" />
      <wt:tabheader title="代码" />
    </wt:tabheaders>
    <wt:tabcontents>
      <wt:tabcontent>
        <wt:treecontainer items="AllDeps" id-field="Searcher.DepId" height="500">
          <wt:searchpanel vm="@Model" reset-btn="true">
            <wt:row items-per-row="ItemsPerRowEnum.Three">
              <wt:textbox field="Searcher.LoginName" />
              <wt:textbox field="Searcher.Name" />
            </wt:row>
          </wt:searchpanel>
          <wt:grid vm="@Model" />
        </wt:treecontainer>
      </wt:tabcontent>
      <wt:tabcontent>
        <wt:code>
//通过指定id-field="Searcher.DepId"，将树中选中的值赋值给Search.DepId字段并刷新内部grid
&lt;wt:treecontainer items="AllDeps" id-field="Searcher.DepId" height="500"&gt;
  //将普通的SearchPanel和Grid写在TreeContainer内部即可实现tree和grid的联动
  &lt;wt:searchpanel vm="@@Model" reset-btn="true"&gt;
    &lt;wt:row items-per-row="ItemsPerRowEnum.Three"&gt;
      &lt;wt:textbox field="Searcher.LoginName" /&gt;
      &lt;wt:textbox field="Searcher.Name" /&gt;
    &lt;/wt:row&gt;
  &lt;/wt:searchpanel&gt;
  &lt;wt:grid vm="@@Model" /&gt;
&lt;/wt:treecontainer&gt;
        </wt:code>
      </wt:tabcontent>
    </wt:tabcontents>
  </wt:tab>

</wt:fieldset>

<script>
    layui.use('code',function(){layui.code({ about: false })})
  layui.table.init('parse-table-demo', {
        limit: 100, page: false
  });
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
